    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滑动焦点图</title>
        <script type="text/javascript" >
            window.onload=function () {
                var timer=null;
            var btnArr=document.getElementById("spaner");
            var smallBtn=btnArr.children;
            var ulInner=document.getElementById("image1");
            for(var i=0;i<smallBtn.length;i++){
                smallBtn[i].index=i;
                smallBtn[i].onclick=function () {
                   for(var j=0;j<smallBtn.length;j++){
                       smallBtn[j].className='';
                   }
                   console.log(-490*this.index);
                    console.log(ulInner);
                    this.className='current';
                    animate(-490*this.index,ulInner);


                    function animate(pace,func) {

                        clearInterval(timer);

                        var speed=0;
                        if (func.offsetLeft<pace){
                            speed=5;
                        }else {
                            speed=-5;
                        }
                        timer=setInterval(function () {
                            func.style.left=func.offsetLeft+speed+"px";
                            var distance=pace-func.offsetLeft;
                            if (Math.abs(distance)<=5){
                                clearInterval(timer);
                                func.style.left=pace+"px";
                            }
                        },5);
                    }
                }

            }


            }
        </script>
        <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
            #bigBox{
                margin: 100px auto;
                height: 170px;
                width: 490px;
                border:1px solid #cccccc;
                padding: 5px;
                position: relative;
            }
           #inner{
               height: 170px;
               width: 490px;
               overflow: hidden;
               position: relative;
           }
           #bigBox #inner ul {
               position: absolute;
               left: 0;
               list-style: none;
               width: 500%;//如果ul不规定宽度那么将会没有浮动
            }
           #inner #image1 li{
               float: left;
           }
           #spaner{
               position: absolute;
               right: 10px;
               bottom: 10px;
           }

           #spaner span{
                display: inline-block;
                width: 18px;
                height: 18px;
                border: 1px solid #cccccc;
                background-color: #7AB800;
                margin-right: 5px;
                text-align: center;
                line-height: 18px;
            }
           #spaner .current{
                background-color: #9c5be7;
            }
        </style>
    </head>
    <body>
     <div id="bigBox">
         <div id="inner">
             <ul id="image1">
                 <li><img src="images/01.jpg" alt=""></li>
                 <li><img src="images/02.jpg" alt=""></li>
                 <li><img src="images/03.jpg" alt=""></li>
                 <li><img src="images/04.jpg" alt=""></li>
                 <li><img src="images/05.jpg" alt=""></li>
             </ul>
         </div>
         <div class="spann">
             <ul id="spaner">
                 <span class="current">1</span>
                 <span>2</span>
                 <span>3</span>
                 <span>4</span>
                 <span>5</span>
             </ul>
         </div>
     </div>
    </body>
    </html>